<template>
  <div :style="myStyle">
    <div class="uploads" :style="{
      width: upWith + 'px',
      height: upHeight + 'px',
      borderRadius: upBradius + 'px',
    }">
      <div v-if="imgurls" class="isblock">
        <el-image ref="preview" :style="{
          width: upWith + 'px',
          height: upHeight + 'px',
          borderRadius: upBradius + 'px',
        }" :preview-src-list="[imgurls]" :src="imgurls"></el-image>
        <div class="imgs_prews">
          <div class="imgs_prew" :style="{
            width: upWith + 'px',
            height: upHeight + 'px',
            borderRadius: upBradius + 'px',
          }">
            <i @click="ylimg()" class="el-icon-view"></i>
            <span></span>
            <i @click="deleteimg()" class="el-icon-delete"></i>
          </div>
        </div>
      </div>
      <el-upload v-else class="avatar-uploader" :style="{
        width: upWith + 'px',
        height: upHeight + 'px',
        borderRadius: upBradius + 'px',
        lineHeight: upHeight + 'px',
      }" :action="updatehttp" :headers="headers" :data="updataimg"
        accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP" :show-file-list="false"
        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-progress="topprogressicon">
        <div v-show="isopens">
          <i class="el-icon-loading"></i>
          上传中...
        </div>
        <i v-show="!isopens" class="el-icon-plus avatar-uploader-icon-sf">{{
          uptext
        }}</i>
      </el-upload>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  props: {
    //改变文字
    uptext: {
      type: String,
      default: "上传图片",
    },
    upWith: {
      type: Number,
      default: 100,
    },
    upHeight: {
      type: Number,
      default: 100,
    },
    upBradius: {
      type: Number,
      default: 16,
    },
    imgSrc: {
      type: String,
    },
  },
  computed: {
    myStyle() {
      return {
        "--upWith": this.upWith + "px",
        "--upHeight": this.upHeight + "px",
        "--upBradius": this.upBradius + "px",
      };
    },
  },
  data() {
    return {
      updatehttp: process.env.VUE_APP_BASE_API + "/common/upload", //上传的接口
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      updataimg: {
        file_name: "", //上传时携带参数
      },
      isopens: false, //上传加载图
      isok: false, //上传成功失败
      imgurls: ''
    };
  },
  watch: {
    imgSrc: {
      handler(val) {
        if (val) {
          this.imgurls = val
        } else {
          this.imgurls = ''
        }
      },
      deep: true,
      immediate: true
    },

  },
  methods: {
    //上传成功
    handleAvatarSuccess(res, file) {
      if (this.isok) {
        this.imgurls = res.url;
        this.isopens = false;
        this.$emit("changeName", res);
      }
    },
    //文件上传时
    topprogressicon(event, file, fileList) {
      if (this.isok) {
        this.isopens = true;
      }
    },
    //上传之前的操作
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        this.isok = false;
      } else {
        this.isok = true;
        this.updataimg.file_name = "front_img";
      }
    },
    //删除
    deleteimg() {
      this.imgurls = "";
      this.$emit("changeName", "");
    },
    //预览
    ylimg() {
      this.$refs.preview.clickHandler();
    },
  },
};
</script>

<style scoped>
.uploads {
  position: relative;
}

.avatar-uploader /deep/ .el-upload {
  width: var(--upWith);
  height: var(--upHeight);
  border-radius: var(--upBradius);
}

.avatar-uploader-icon-sf {
  color: #999999;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  width: 100%;
  text-align: center;
}

.isblock {
  width: 100%;
}

.isblock:hover .imgs_prews {
  display: block;
}

.imgs_prews {
  display: none;
}

.imgs_prew {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}

/* 左右图标 */
.imgs_prew i {
  display: inline-block;
  font-size: 20px;
  cursor: pointer;
}

.imgs_prew span {
  width: 2px;
  height: 18px;
  margin: 0px 20px;
  background-color: #fff;
}
</style>
